<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				/*  透视 */
				perspective: 1000px;
				/* 透视点 */
			/* 	perspective-origin: 50% 50%; */
			
			}
			
			/* div{
				width: 400px;
				height: 400px;
			} */
			.box1{
				/* 给盒子开启3D空间效果*/
				transform-style: preserve-3d;
				background-color:rgba(0, 255, 255, 0.4);
				margin: 200px auto;
			}
			.box2{
				background-color: deeppink;
				transform: rotatex(45deg);/* 旋转 : rotate */
			}
			@keyframes men{
				form{
					
				}
			}
			.bigbox{
				position: relative;
				width: 400px;
				height: 400px;
				margin: 200px auto;
				border: 1px solid deeppink;
				transform-style: preserve-3d;
			}
			.bigbox div{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 400px;
				height: 400px;
				border: 1px solid blue;
			}
			.bigbox div:nth-child(1){
				transform: translatez(200px);
			}
			.bigbox div:nth-child(2){
				transform: translatez(-200px)  rotate(90deg);
			}
			.bigbox div:nth-child(3){
				transform: translatex(-200px) rotatey(90deg);
			}
			.bigbox div:nth-child(4){
				transform: translatez(-200px)  rotatez(180deg);
			}
			.bigbox div:nth-child(5){
				transform: translatey(-200px)  rotatex(90deg);
			}
			.bigbox div:nth-child(6){
				transform: translatez(-200px) rotatey(90deg);
			} 
			
			
		</style>
	</head>
	<body>
		<!-- <div class="box1">
			<div class="box2"></div>
		</div> -->
		
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
	</body>
</html>
